<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>专栏课程</el-breadcrumb-item>
        <el-breadcrumb-item>修改专栏</el-breadcrumb-item>
      </el-breadcrumb>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">修改专栏</h3>
    </el-card>

    <el-card style="margin-top: 20px">
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">基础信息</h3>
      <el-form
          :model="modityForm"
          :rules="addFormRules"
          ref="addLiveFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="专栏名称" prop="specialcoursename" placeholder="请输入专栏课程名称">
          <el-input v-model="modityForm.specialcoursename"></el-input>
        </el-form-item>

        <el-form-item label="专栏封面" :label-width="formLabelWidth" prop="specialcoursecover">
          <el-input type="hidden" v-model="modityForm.specialcoursecover" autocomplete="off"></el-input>
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              name="livecover"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程分类" :label-width="formLabelWidth">
          <el-select v-model="modityForm.specialcoursetype" placeholder="请选择课程类型">
            <el-option label="请选择部门类型" value="0"></el-option>
            <el-option v-for="c in courseTypeList" :label="c.typename" :value="c.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="专栏描述" prop="specialcoursedescription" placeholder="请输入直播描述">
          <el-input v-model="modityForm.specialcoursedescription"></el-input>
        </el-form-item>

        <el-form-item label="上架时间" placeholder="请选择开始时间">
          <div class="block">
            <el-date-picker
                v-model="modityForm.insertTime"
                type="date"
                placeholder="选择日期"
                aria-readonly="true"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">售卖信息</h3>
      <el-form
          :model="modityForm"
          :rules="addFormRules"
          ref="addLiveFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <!--        <el-form-item label="直播商品" prop="" placeholder="请输入直播名称">-->
        <!--          <el-input v-model="addForm.livename"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="优惠卷" prop="" placeholder="请输入直播名称">-->
        <!--          <el-input v-model=""></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item label="专栏价格" prop="specialcourseprice">
          <el-input v-model="modityForm.specialcourseprice"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="specialCount">
          <el-input v-model="modityForm.specialCount"></el-input>
        </el-form-item>
        <el-form-item label="上架时间" prop="specialcourseorder">
          <el-radio v-model="modityForm.specialcourseorder" :label="1">立刻上架</el-radio>
          <el-radio v-model="modityForm.specialcourseorder" :label="0">暂不上架</el-radio>
        </el-form-item>

      </el-form>
    </el-card>

    <!--    老师模块-->
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        课程管理
        <el-button type="primary" style="float: right" size="mini" @click="showAdd">新增课程</el-button>
      </h3>

      <!--            新增过来的表格-->
      <el-table :data="showTeacherList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="coursename"
            label="课程信息"
            width="180">
        </el-table-column>
        <el-table-column
            prop="coursecover"
            label="课程封面"
            width="180">
          <template slot-scope="scope">
            <img :src="nginxUrl+scope.row.coursecover" style="width: 50px;height: 50px;border-radius: 50%" />
          </template>
        </el-table-column>
        <el-table-column
            prop="courseprice"
            label="价格"
            width="180">
        </el-table-column>
        <el-table-column
            prop="coursesubscription"
            label="订阅量"
            width="180">
        </el-table-column>
        <el-table-column
            prop="lessonType"
            label="课程类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="inserttime"
            label="上架时间"
            width="180">
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="doAdd">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-card>
    <!-- 隐藏的模态框   -->
    <el-dialog title="选择教师" :visible.sync="addDialogVisible" width="70%">
      <el-card style="margin-top: 20px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="老师名称：">
            <el-input v-model="coursename" placeholder="请输入搜素专栏课程名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="searchTeacher">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="resetBox">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 30px">

        <el-table :data="courseList" @selection-change="idChance" border stripe ref="multipleTable">

          <el-table-column type="selection" width="60">

          </el-table-column>
          <el-table-column
              prop="coursename"
              label="课程信息"
              width="180">
          </el-table-column>
          <el-table-column
              prop="coursecover"
              label="课程封面"
              width="180">
            <template slot-scope="scope">
              <img :src="nginxUrl+scope.row.coursecover" style="width: 50px;height: 50px;border-radius: 50%" />
            </template>
          </el-table-column>
          <el-table-column
              prop="courseprice"
              label="价格"
              width="180">
          </el-table-column>
          <el-table-column
              prop="coursesubscription"
              label="订阅量"
              width="180">
          </el-table-column>
          <el-table-column
              prop="lessonType"
              label="课程类型"
              width="180">
          </el-table-column>
          <el-table-column
              prop="inserttime"
              label="上架时间"
              width="180">
          </el-table-column>

        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

      </el-card>
      <el-button type="primary" @click="doAdd0">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>


    </el-dialog>


  </div>

</template>

<script>
export default {
  name: "LiveAdd",
  data() {
    return {
      specialCourseId: '',
      nginxUrl: this.$MyUrl.imgUrl + "course/",
      headerToken: {
        token: window.sessionStorage.getItem("token")
      },
      commodityUrl: this.$MyUrl.imgUrl + "commodity/",
      couponUrl: this.$MyUrl.imgUrl + "coupon/",
      imageUrl: '',
      uploadUrl: this.$MyUrl.serverUrl + "special/upload",
      formLabelWidth: '120px',
      pageNum: 1,
      pageSize: 5,
      total: 0,
      addDialogVisible: false,
      coursename: null,
      courseList: [],
      readyList: [],
      addList: [],
      showTeacherList: [],
      courseTypeList: [],
      addForm: {
        id: '',
        specialcoursecover: '',
        specialcoursename: '',
        specialcoursetype: '',
        specialcoursedescription: '',
        specialcourseprice: '',
        specialcoursecount: '',
        specialcourseorder: '',
        courseList: [],
      },
      modityForm: {
        // id: 0,
        // specialcoursename: '',
        // specialcoursecover: '',
        // specialcoursetype: '',
        // specialcoursedescription: '',
        // specialcourseorder: '',
        // specialcourseprice: '',
        // specialcoursecount: '',
        // specialcoursestatus: '',
        // specialCount: '',
        // insertTime: '',
        // courseCount: '',
        courseList: []

      },


      addFormRules: {},
    }
  },
  methods: {
    // 老师模态框中的查询
    searchTeacher() {
      this.pageNum = 1;
      this.getCourseList();
    },
    //重置查询
    resetBox() {
      this.techerName = "";
      this.getCourseList();
    },
    // 教师模态框的取消
    cancelAdd() {
      this.addDialogVisible = false;
    },
    //查询分类
    getCourseTypeList() {
      let url = "course/typelist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.courseTypeList = res.data.data;
          console.log(res.data.msg)
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.addForm.livecover = res.data;
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 保存 被选中的老师反显到新增直播页面中
    idChance(selection) {
      this.readyList = [];
      for (let o of selection) {
        this.readyList.push(o);
      }
    },
    // 新增模态框中 确定新增老师
    doAdd0() {
      this.showTeacherList = this.readyList;
      // alert(this.addList)
      this.addDialogVisible = false;
    },

    //打开 新增老师 模态框
    showAdd() {
      this.addDialogVisible = true;
      this.$nextTick(() => {
        this.courseList.forEach((grt) => {
          console.log("grt")
          console.log(grt.id)
          this.addList.forEach((con) => {
            console.log("con")
            console.log(con)
            if (grt.id == con) {
              this.$refs.multipleTable.toggleRowSelection(grt, true);
            }
          })
        })
      })
    },
    //获取 新增直播 添加老师模态框中的角色为老师的员工数据
    getCourseList() {
      let url = "course/clist";
      this.$axios.get(url, {
        params: {
          name: this.coursename,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.courseList = res.data.data.list;
          console.log("1111")
          console.log(this.courseList)
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },

    // 新增直播 最终的确定
    doAdd() {
      this.addForm.list = this.addList;
      // console.log(this.addList);
      // console.log(this.addForm);
      let url = "special/add";
      this.$axios.post(url, this.addForm).then(res => {
        if (res.data.code == 200) {
          //增加成功 置空
          this.addForm = {};
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.$router.push("/Live");
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    //更改每页多少条数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCourseList();
    },
    //换页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCourseList();
    },
    getshowTeacherList() {
      this.courseList.forEach((opd) => {
        this.addList.forEach((ad) => {
          if (opd.id == ad) {
            this.showTeacherList.push(opd);
          }
        })
      })
    },
    //查询 专栏课程的信息
    getSpecialCourse() {
      let url = "special/editliveList";
      this.$axios.get(url, {
        params: {
          id: this.id,
        }
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res)
          this.modityForm = res.data.data;
          console.log("123")
          console.log("123")
          console.log(this.modityForm)
          console.log("123")
          this.addForm.specialcoursecover = res.data.data.specialcoursecover
          this.imageUrl = this.nginxUrl + this.modityForm.specialcoursecover;

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    getID() {
      let url = "special/queryCourseById";
      this.$axios.get(url, {
        params: {
          specialCourseId: this.specialCourseId,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.addList = res.data.data;
          this.getshowTeacherList();

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },


  created() {
    this.id = this.$route.query.id;
    // alert(this.id)
    this.specialCourseId = this.id;
    console.log("1111")
    console.log(this.courseList)
    this.getSpecialCourse();
    this.getCourseList();
    this.getID();
    this.getCourseTypeList();



  }
}
</script>

<style scoped>

</style>